<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/Recommend.css" />
    <link rel="stylesheet" type="text/css" href="css/animation.css" />
    <link rel="stylesheet" type="text/css" href="css/button.css" />
    <link rel="stylesheet" type="text/css" href="css/login.css" />
    <title>首页</title>



</head>
<style>

</style>



<body>
    <div class="web">
        <header>
            <section><img src="images/logo_03.jpg"></section>
            <section><img src="images/logo.jpg"></section>
            <nav class="btn_nav">
                <span></span>
                <span></span>
                <span></span>
            </nav>
            <ul class="nav">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="video.html">视频</a></li>
                    <li><a href="fun.html">功能</a></li>
                    <li class="border_san"><a href="consult.html">咨询</a></li>
                    <li><a href="actor.html">名伶</a></li>
                    <li class="toggle_btn">登录</li>
            </ul>
        </header>
         <p class="h_txt">首页推荐功能，每天实时更新内容<br>
            为你增加你不知道的粤剧知识</p>
         <p class="t_txt">Recommend function</p>
         <div class="banner_box">

                <div class="left_banner">
                        <img src="images/re1.jpg">
                </div>
                <div class="r_banner">
                        <img src="images/re2_03.jpg">
                </div>
         </div>
         <p class="small_title">关于推荐</p>
         <div class="A_img">
             <span>
                    <img src="images/AA.png">
             </span>
         </div>
         <p class="p_content">这是一个关于中国粤剧文化的页面以及我们将要上线的产品，这个产品兼备各种粤剧文化的有趣详解，以及利用
                高精确的技术纠正你的粤剧发音和唱腔方式，它具有跟唱的逐句教学功能，以及令人惊叹的声音识别系统，能够准
                确保证你的音准和时值把控能力。像玩游戏一样下载这个APP吧，它会让你更加了解中国的文化，在这个APP里面你
                能找到的不只是粤剧，还有整个优秀中华文化的缩影，我们可以得到很好的只知识储备，让我们重新审视优秀传统
                吧加入我们，给我们提供意见和发展动力。</p>

        <div class="B_img">
                <span>
                        <img src="images/BB.png">
                </span>
            </div>
        <p class="p_contentt">这是推荐功能主要推荐我们的中国粤剧文化的页面以及我们将要上线的产品，这个产品兼备各种粤剧文化的有趣详
                解，以及利用高精确的技术纠正你的粤剧发音和唱腔方式，它具有跟唱的逐句教学功能，以及令人惊叹的声音识别
                系统，能够准确保证你的音准和时值把控能力。像玩游戏一样下载这个吧，它会让你更加了解中国的文化，在这个
                里面你能找到的不只是粤剧，还有整个优秀中华文化的缩影，我们可以得到很好的只知识储备，让我们重新审视优
                秀传统吧加入我们，给我们提供意见和发展动力。这是推荐功能主要推荐我们的中国粤剧文化的页面以及我们将要
                上线的产品，这个产品兼备各种粤剧文化的有趣详解，以及利用高精确的技术纠正你的粤剧发音和唱腔方式，它具
                有跟唱的逐句教学功能，以及令人惊叹的声音识别系统，能够准确保证你的音准和时值把控能力。像玩游戏一样下
                载这个吧，它会让你更加了解中国的文化，在这个里面你能找到的不只是粤剧，还有整个优秀中华文化的缩影，我
                们可以得到很好的只知识储备，让我们重新审视优秀传统吧加入我们，给我们提供意见和发展动力。。</p>
           <footer>
                <img src="images/footer_02.jpg">
                <aside>
                    <p>意见反馈 & 让我们变得更好</p>
                    <input type="text">
                    <span>sumbit</span> 
                </aside> 
           </footer>
    </div>

    <!--登录-->
    <div class="login">
            <article>
                    <section class="login_left">
                            <img src="images/dl_03.jpg">
                    </section>
                     <form class="login_right login_box">
                            <h3>登录</h3>
                            <input type="text" placeholder="请输入用户名/手机号" required>
                            <input type="password" placeholder="请输入密码" required minlength="8" maxlength="15" required/><br>
                            <input type="submit" value="确认登录">
                            <p>还没注册？去<span class="reg_btn">注册</span></p>
                    </form> 
                    <form class="login_right register">
                        <h3>注册</h3>
                        <input type="text" placeholder="请输入手机号注册" required>
                        <input  placeholder="请输入密码"  type="password" minlength="8" maxlength="15" required/><br>
                        <input  placeholder="请确认密码"  type="password" minlength="8" maxlength="15" required/><br>
                        <input type="submit" value="确认注册">
                        <p>注册完成？去<span class="login_btn">登录</span></p>
                </form>
            </article>
            <span class="back">返回</span>
    </div>
</body>
<script src="js/response.js"></script>
<script src="js/logres.js"></script>
<script src="js/nav.js"></script>
<script>
</script>

</html>